<html>
    <head>
        <title>echarts生成视频</title>
        <style>
            html {
                padding: 0;
                margin: 0;
            }
            body {
                padding: 0;
                margin: 0;
            }
            .main {
                width: 1080px;
                height: 810px;
            }
        </style>
        <script src="./public/echarts2.js"></script>
        <script src="./public/options.js"></script>
    </head>
    <body>
        <div class="main" id="main"></div>
    </body>
    <script>
        window.myVariable = [];
        window.picNum = 0;
        window.myChart = null;
        window.isFinishedBz = false;
        const initEcharts = async (msg) => {
            //初始化
            window.myVariable = [];
            window.picNum = 0;
            window.myChart = null;
            window.isFinishedBz = false;
            //创建canvas
            let el = document.createElement('canvas');
            el.id = 'maina';
            el.width = msg.width;
            el.height = msg.height;
            // let el = document.getElementById('main');
            // 基于准备好的dom，初始化echarts实例
            window.myChart = echarts.init(el);
            window.myChart.setOption(msg.options);
            //添加 `rendered` 事件监听器
            window.myChart.getZr().on('rendered', async function () {
                // 可以在这里进行进一步的处理，比如导出图表、清理资源等
                console.log('Chart rendered!');
                let isFinished = window.myChart.getZr().animation.isFinished();
                let urlBase64 = window.myChart.getZr().painter.getLayer(0).dom.toDataURL();
                window.myVariable.push(urlBase64);
                window.picNum += 1;
                if (!window.isFinishedBz) {
                    // num.value += 1;
                    // if (num.value % 2 == 0) {
                    //     let urlBase64 = window.myChart.getZr().painter.getLayer(0).dom.toDataURL();
                    //     urlBase64 = null;
                    // }

                    //  window.myVariable.push(urlBase64);
                    if (isFinished) {
                        window.isFinishedBz = true;
                        // ffTOVideo();
                    }
                }
            });
        };
        // console.log('初始化');
        // 等待 Puppeteer 注入配置参数并渲染图表
        window.addEventListener('message', async function (event) {
            console.log('收到消息');
            console.log(event);

            let allmsg = await barChart(event.data);
            await initEcharts(allmsg);
        });
    </script>
</html>
